<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:400px;height:300px;border: solid 1px black;margin:0 auto;}
        .box ul{margin: 0;padding: 0;list-style: none;display: flex;line-height:30px;background: #efefef;}
        .box ul li{flex:1;border-left:solid 1px #fff;border-right:solid 1px #fff;text-align: center;cursor: pointer;}
        .box ul li.active{background: red;color: #fff;}

        .cont>div{width:400px;height:270px;display:none;}
        .cont .cont1{background: #399;}
        .cont .cont2{background: #393;}
        .cont .cont3{background: #993;}
        .cont .cont4{background: #939;}
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>按钮1</li>
            <li>按钮2</li>
            <li>按钮3</li>
            <li>按钮4</li>
        </ul>
        <div class="cont">
            <div class="cont1">内容1</div>
            <div class="cont2">内容2</div>
            <div class="cont3">内容3</div>
            <div class="cont4">内容4</div>
        </div>
    </div>
</body>
<script>
    // 获取元素
    var aLi = document.querySelectorAll(".box ul li");
    var acont = document.querySelectorAll(".box .cont>div");

    // 设置默认值
    var index = 0;
    aLi[index].className = "active";
    acont[index].style.display = "block";

    // 遍历所有按钮
    for(var i=0;i<aLi.length;i++){
        // 提前在按钮身上记录自身的索引
        aLi[i].xuhao = i;
        // 绑定事件
        aLi[i].onclick = function(){
            // 先取消上一个高亮元素与内容
            aLi[index].className = "";
            acont[index].style.display = "none";

            // 获取当前点击的元素
            // console.log( this )

            // 给当前点击的元素添加高亮，和显示对应内容
            this.className = "active";
            acont[this.xuhao].style.display = "block";

            // 将本次点击的按钮的索引，设置到默认索引，作为下一次要清除的上一个索引
            index = this.xuhao;
        }
    }


    // for(var j=0;j<4;j++){
    //     console.log(j);
    // }

    // 1. 异步
        // 事件：并不是写了绑定事件的代码，事件就一定在当前位置执行，而是根据实际触发行为执行。
        // 默认情况下，如果在循环内，绑定了事件，在事件处理函数内，无法获取循环每次的计数器，只能获取循环结束后的计数器
    // 2. 在事件内，绝对可以通过 关键字this 获取到当前 绑定 事件的元素
    // 3. 提前给每个元素绑定自定义属性，记录自身索引


</script>
</html>